<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app1">{{ time }}</div>

<div id="app2">
    <ul>
        <li v-for="list in lists">{{ list }}</li>
    </ul>
</div>

<div id="app3">
    <ul>
        <li v-for="list in lists" v-bind:key="list.id">
            {{ list.ip }}
            {{ list.seo_area }}
            <button @click="list.status += 1">显示</button>
            <ul v-if="list.status % 2 == 1">
                <li v-for="info in list.seo_content">
                    {{ info.join('#') }}
                    <button @click="makereverse" v-bind:info="info">dian</button>
                </li>
            </ul>
        </li>
    </ul>
</div>

<div class="" id="app4">
    <div>{{ message }}</div>
    <input type="text" v-model="message">
    <button @click="dostr">处理</button>
</div>

<div id="app5">
    <app5_box1 v-bind:app5_box1_data="data1"></app5_box1>
    <app5_box2 v-for="box2 in data2" v-bind:app5_box2_data="box2" v-bind:key="box2.id"></app5_box2>
    <ul>
        <app5_box3 v-for="box3 in data3" v-bind:app5_box3_data="box3" v-bind:key="box3.id">

        </app5_box3>
    </ul>
</div>

<div id="app6">
    <!-- v-once 不会响应 -->
    <p v-once>{{ id }}</p>
    {{ name }}
</div>


<div id="app7">
    <p>{{ template }}</p>
    <p v-html="template"></p>
    <div v-bind:id="id" v-bind:disabled="status">{{ id }}</div>
    <button @click="echoCode">点击触发</button>
</div>

<div id="app8">
    <div>{{ firstName }}</div>
    <div>{{ lastName }}</div>
    <div>{{ fullName }}</div>
    <button @click="changeFirstName">修改前缀</button>
    <button @click="changeLastName">修改后缀</button>
    <button @click="changeFullName">修改全名</button>
</div>

<div id="app9">
    <input type="text" v-model="ask">
    <div>{{ answer }}</div>
</div>

<div id="app10"></div>

<script src="./vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script src="main.js"></script>
</body>
</html>